<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- Bootstrap Styles-->
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap.css}"/>
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap-theme.min.css}"/>
  <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap-admin-theme.css}"/>
  <link rel="stylesheet" type="text/css"  th:href="@{/css/component.css}"/>
  <link rel="stylesheet" type="text/css" th:href="@{/css/admin.css}"/>
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 富文本编辑器 -->
  <script th:src="@{./js/wang.js}"></script>
  <style type="text/css">
    .footer{
      margin-top: 20px;
      background:#222c3a;
      bottom:0;
      width: 100%;
      height: 70px;
      text-align: center;
      color: white;
      position: fixed;
    }

    .footer .footer-top{
      margin-top: 30px;
    }

    .footer a{
      color: #f0f1f1;
      text-decoration: none;
      padding: 0 10px;
      vertical-align:middle;
    }

    .footer a:hover{
      color: red;
      text-decoration: underline;
    }

    .footer p{
      height: 15px;
      color: #888888;
      margin-top: 30px;
    }
  </style>
</head>
<body class="bootstrap-admin-with-small-navbar">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top " role="navigation">
  <div class="container">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" th:href="@{../user/index}">GMS</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a th:href="@{../user/index}">首页</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">场地<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../toPlaceApply1}">预约场地</a></li>
              <li><a th:href="@{../toPlaceUse}">场地使用</a></li>
              <li><a th:href="@{../toUserPlaceApply}">预约退订</a></li>
              <li><a th:href="@{../toStanderDetail}">场地收费标准</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">器材<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../equipment/showEquipment}" >租借</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">赛事<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../event/touserevent(pageNum=1,userId=${session.username})}">我的赛事</a></li>
              <li><a th:href="@{../event/toeventcreate}">创建赛事</a></li>
            </ul>
          </li>
          <li class="active">
            <a th:href="@{../notice/tonoticeuser}">网站公告</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li th:if="${session.permission}!='0'" ><a th:href="@{../management}">管理后台</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a th:href="@{../user/toChangeuser}">修改资料</a></li>
              <li><a th:href="@{../user/toChangepassword}">修改密码</a></li>
              <li class="divider"></li>
              <li><a th:href="@{/login}">退出登录</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </div>
</nav>

<div class="row">
  <div class="row bootstrap-admin-no-edges-padding">
    <div class="col-md-12">
      <div class="rbody " id="app">
        <div class="main">
          <div class="tabList">
            <div class="search_form">
              <div class="search_box"> <!---->
                <form id="equipForm" th:action="@{query}" method="post">
                  <p style="font-size:15px; margin-top: 10px">
                    器材查询-输入器材名称
                    <input type="text"  name="etypename" th:value="${etypename}" style="width: 80px">
                    器材类型
                    <input type="text"  name="etypeid" th:value="${etypeid}" style="width: 80px">
                    <button type="submit" class="custom-btn btn-2" >查询</button>
                  </p>
                </form>
              </div>
            </div>
          </div>
          <div class="imglists">
            <table>
              <colgroup>
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="125">
              </colgroup>
              <tr>
                <th>
                  器材图片
                </th>
                <th>
                  器材名称
                </th>
                <th>
                  器材编号
                </th>
                <th>
                  租借价格
                </th>
                <th>
                  器材费用
                </th>
                <th>
                  器材数量
                </th>
                <th>
                  操作
                </th>
              </tr>
              <tr th:each="equip:${page.records}">
                <!--                            <td th:text="${equip.equipid}"></td>   style=".borders{border:1px solid #d2e1f1};float:left"-->
                <td >
                  <img th:src="@{/static/} + ${equip.getEquipPic()}" width="100" height="100" alt="" />
                </td>
                <td th:text="${equip.etypename}"></td>
                <td th:text="${equip.etypeid}"></td>
                <td th:text="${equip.getEfee()}"></td>
                <td th:text="${equip.getBuycost()}"></td>
                <td th:text="${equip.getBorrowcount()}"></td>
                <td th:if="${equip.status=='1'}"> <!--1表示未租借-->
                  <a class="btn btn-success"  th:href="@{/equipment/toinsertRentOrder(eId=${equip.etypeid})}" style="font-size: 13px">租借</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
      <script src="./js/common.js"></script>
      <div class="footer" >
        <div class="footer-top">
          <a th:href="@{/equipment/query(pageNum=1,etypename=${etypename},etypeid=${etypeid})}">首页</a>
          <a  th:if="${page.current}!=1"
              th:href="@{/equipment/query(pageNum=${page.current}-1,etypename=${etypename},etypeid=${etypeid})}">
            上一页</a>
          <a th:if="${page.current}!=${page.pages}"
             th:href="@{/equipment/query(pageNum=${page.current}+1,etypename=${etypename},etypeid=${etypeid})}">
            下一页</a>
          <a th:href="@{/equipment/query(pageNum=${page.pages},etypename=${etypename},etypeid=${etypeid})}">尾页</a>
        </div>
      </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/examples/offcanvas/offcanvas.js"></script>
<script type="text/javascript" th:src="@{/js/jquery/lib/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/dist/jquery.validate.js}"></script>
<script>
  $().ready(function() {
    $("#equipForm").validate({
      rules: {
        etypename: {

          maxlength: 32
        }
      },
      messages: {
        etypename: {
          required: "请输入正确的器材名称",
          maxlength: "器材名称不能超过32字符"
        }
      }
    });
  });
</script>
</html>